<template>
  <div>
    <div class="header">
      <img class="logo" alt="">
      <img class="fork" alt="">
      <div class="header_main">
        <span>起步</span>
        <span>文档</span>
        <span>下载</span>
        <span>联系</span>
        <span>练习</span>
        <span>论坛</span>
        <span>更新</span>
      </div>
    </div>
    <div class="update-header" v-if="isUpdated">
      TypeScript 2.7 现已发布。现在<a href="#">下载</a>我们最新版本!
    </div>
  </div>
</template>

<script lang="ts">
export default{
  name: 'HelloWorld',
  data () {
    return {
      isUpdated: true
    }
  }
}
</script>
<style scoped lang="stylus">
@import "~style/myMethod.styl"
.update-header
  height .54rem
  line-height .54rem
  background-color rgb(211,211,211)
  margin-top .05rem
  color block
  text-align center
  font-size .14rem
  a
    color #337ab7
    text-decoration none
.header
  height .54rem
  background-color #294E80
  display flex
  .logo
    content url('~img/logo_nocircle.svg')
    position absolute
    top 1vh
    left 2vw
    width 1.6rem
  .fork
    content url('~img/fork_me_ribbon.svg')
    position absolute
    top 0
    right 0
    width 1.6rem
  &_main
    warp_init()
    line-height 100%
    span
      color #ffffff
      width 5vw
      display inline-block
      line-height .54rem
      cursor pointer
    span:hover
      background-color #ffffff
      color #666
</style>
